<template>
  <ModuleWrap
    :title="flag ? '测点统计' : '设备总览'"
    class="flex h-[71%] flex-col justify-center overflow-hidden pt-1"
    :moduleStyle="moduleStyle"
  >
    <template #header>
      <div @click="flag = !flag" class="cursor-pointer">
        <SwapOutlined class="mr-2" />
        <span>切换</span>
      </div>
    </template>
    <!-- 设备总览 -->
    <div
      class="device-overview flex h-full w-full flex-col overflow-hidden"
      v-show="!flag"
    >
      <div class="h-fit w-full">
        <SecondTitle
          class="mb-[30px]"
          title="本地设备"
          label="设备总数"
          :num="deviceTotalCount"
        ></SecondTitle>
        <div class="flex">
          <div class="flex flex-1 flex-col items-center justify-center">
            <img src="/static/screen/device1.png" class="h-[44px] w-[44px]" />
            <NumWrap :info="deviceCount1"></NumWrap>
          </div>
          <div class="flex flex-1 flex-col items-center justify-center">
            <img src="/static/screen/device2.png" class="h-[44px] w-[44px]" />
            <NumWrap :info="deviceCount2"></NumWrap>
          </div>
        </div>
      </div>
      <!-- JOPENS接入台站:有jopens信息 -->
      <template v-if="jopensStationTotalCount > 0">
        <div class="h-fit w-full" v-if="jopensStationTotalCount > 0">
          <SecondTitle
            class="mb-[18px] mt-[30px]"
            title="JOPENS接入台站"
          ></SecondTitle>
          <div class="jopens-box flex items-center justify-between">
            <span>台站总数</span>
            <span>{{ jopensStationTotalCount }}</span>
          </div>
        </div>
        <!-- 关联边缘终端 -->
        <div
          class="flex w-full flex-1 flex-col overflow-hidden"
          v-if="jopensStationTotalCount > 0"
        >
          <SecondTitle
            class="my-[30px]"
            title="关联边缘终端"
            :num="edgeTerminalCount"
          ></SecondTitle>
          <!-- 关联边缘终端列表 -->
          <TableWrap :data-source="terminalList" :columns="columns">
          </TableWrap>
        </div>
      </template>
      <div class="h-[69%] w-full flex-1" v-else>
        <SecondTitle
          class="my-[30px]"
          title="测点统计"
          label="测点总数"
          :num="measureTotalCount"
        ></SecondTitle>
        <NumWrap :info="messureCount" class="measure-overview"></NumWrap>
        <SecondTitle
          class="my-[30px] h-[10%]"
          title="测点触发统计"
        ></SecondTitle>
        <BarChart class="h-[90%] w-full" :dataList="dataList"></BarChart>
      </div>
    </div>
    <!-- 测点统计 -->
    <div class="messure-count h-full w-full" v-show="flag">
      <div class="w-full">
        <SecondTitle
          class="mb-[30px]"
          title="测点总览"
          label="测点总数"
          :num="measureTotalCount"
        ></SecondTitle>
        <NumWrap :info="messureCount" class="measure-overview"></NumWrap>
      </div>
      <div class="flex h-[81%] w-full flex-col">
        <div class="h-[50%] w-full">
          <SecondTitle
            class="mb-[18px] mt-[30px]"
            title="测点触发统计"
          ></SecondTitle>
          <BarChart class="h-[70%] w-full" :dataList="dataList"></BarChart>
        </div>
        <div class="h-[50%] w-full">
          <SecondTitle
            class="mb-[18px] mt-[30px]"
            title="测点触发趋势"
          ></SecondTitle>
          <LineChart class="h-[70%] w-full" :dataList="dataList"></LineChart>
        </div>
      </div>
    </div>
  </ModuleWrap>

  <ModuleWrap title="触发统计" class="flex h-[29%] flex-col justify-center">
    <Chart class="h-full w-full"> </Chart>
  </ModuleWrap>
</template>

<script setup lang="tsx">
import { computed, ref, watch } from 'vue';
import {
  getAlarmMeasuringPointStatistics,
  getDeviceOverviewDate,
} from '@/pages/screen/api';
import { SwapOutlined } from '@ant-design/icons-vue';
import { BoTableProps } from '@boeyo/ui';
import { eventBus } from '@/utils/eventMitt';
import ModuleWrap from '../ModuleWrap.vue';
import NumWrap from '../NumWrap.vue';
import SecondTitle from '../SecondTitle.vue';
import TableWrap from '../TableWrap.vue';
import BarChart from './BarChart.vue';
import Chart from './Chart.vue';
import LineChart from './LineChart.vue';

const params = ref(history.state.params || '');
// 设备总览
const deviceCount1 = computed(() => [
  { num: majorDeviceCount.value, title: '专业设备' },
  { num: assistantDeviceCount.value, title: '辅助设备' },
]);
const deviceCount2 = computed(() => [
  { num: onlineDeviceCount.value, title: '在线数' },
  { num: offlineDeviceCount.value, title: '离线数' },
]);
// 获取设备总览数据
const deviceOverviewData = ref({});
const jopensStationTotalCount = ref(0);
const assistantDeviceCount = ref(0);
const deviceTotalCount = ref(0);
const edgeTerminalCount = ref(0);
const majorDeviceCount = ref(0);
const offlineDeviceCount = ref(0);
const onlineDeviceCount = ref(0);
const terminalList = ref([]);

// 测点总览
const measureTotalCount = ref(0);
const freeFieldCount = ref(0);
const structureFieldCount = ref(0);
// 生成饼图数据
const dataList = ref([]);
const messureCount = computed(() => [
  { num: structureFieldCount.value, title: '结构场' },
  { num: freeFieldCount.value, title: '自由场' },
]);
const init = async () => {
  getDeviceOverviewDate(params.value).then(({ data }: any) => {
    deviceOverviewData.value = data;
    jopensStationTotalCount.value = data.jopensStationTotalCount;
    assistantDeviceCount.value = data.assistantDeviceCount;
    deviceTotalCount.value = data.deviceTotalCount;
    edgeTerminalCount.value = data.edgeTerminalCount;
    terminalList.value = data.edgeTerminalVO || [];
    majorDeviceCount.value = data.majorDeviceCount;
    offlineDeviceCount.value = data.offlineDeviceCount;
    onlineDeviceCount.value = data.onlineDeviceCount;
  });
  const { data } = await getAlarmMeasuringPointStatistics(params.value);
  measureTotalCount.value = data.count;
  freeFieldCount.value = data.freeFieldCount;
  structureFieldCount.value = data.structureFieldCount;
  dataList.value = data.list;
};
init();

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '边缘终端',
    dataIndex: 'name',
  },
  {
    title: '关联台站数',
    dataIndex: 'stationCount',
    align: 'center',
  },
]);

// 切换图例
const flag = ref(true);

const moduleStyle = {
  backgroundImage: "url('/static/screen/module-wrap-bg-right.png')",
  overflow: 'hidden',
};

// 监听左侧下拉框变化:重新获取测点信息
eventBus.on('changeStructure', (data: any) => {
  params.value = data.params;
});
watch(() => params.value, init, {
  deep: true,
});
</script>

<style lang="scss" scoped>
.module-wrap {
  padding-bottom: 30px;
  &:last-child {
    padding-bottom: 0;
  }
}

// 测点总览
.measure-overview {
  background: url('/static/screen/measure-overview-bg.png');
  background-size: 100% 100%;
}

// jopens接入台站
.jopens-box {
  background: url('/static/screen/jopens-bg.png');
  background-size: 100% 100%;
  width: 100%;
  height: 88px;
  & > span {
    width: 50%;
    display: flex;
    justify-content: center;
    &:first-child {
      font-weight: 800;
      font-size: 14px;
      color: #ffffff;
    }
    &:last-child {
      font-weight: bold;
      font-size: 36px;
      color: #0bf9fe;
      font-style: italic;
    }
  }
}
</style>
